<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>渐变</title>
    <style>
        * {
            /*outline: 2px solid;*/
        }

        .a {
            width: 300px;
            height: 100px;
            background: -webkit-linear-gradient(left, red 10%, blue 20%, yellow 30%);
            /*-webkit-linear-gradient(方向,颜色 所占空间)*/
        }

        .b {
            width: 300px;
            height: 300px;
            /*径向渐变*/
            background: -webkit-radial-gradient(80% 80%, red 30%, black 100%);
        }

        .img1 {
            width: 600px;
            height: 600px;
        }

        .a1 {
            width: 600px;
            height: 300px;
            background: url("22.jpg");
            -webkit-mask: -webkit-linear-gradient(rgba(0, 0, 0, 1.0), transparent);

            background-size: cover;

        }

        .a2 {
            width: 600px;
            height: 300px;
            background: url("22.jpg");
            -webkit-mask: url(44.png) -97px 0, url(44.png) 62px 0px;
            -webkit-mask-repeat: no-repeat;

            background-size: cover;
        }

        .img2 {
            width: 600px;
            height: 300px;
            -webkit-mask: radial-gradient(transparent 2%,rgba(0, 0, 0, 1.0) 33%) 132px -92px;
        }
        .img3  {
            -webkit-mask: radial-gradient(transparent 2%,rgba(0, 0, 0, 1.0) 33%) -236px 88px;
        }
        .img2 img  {
            width: 100%;
            height: 100%;
        }
        .text {
            background: yellow;
            color: transparent;
            font-size: 2em;
            font-family: '微软雅黑';
            background-image:-webkit-linear-gradient(left, skyblue 30%, #b382ef 60%, #f06786 100%);
            -webkit-background-clip: text;
        }

        .yuan {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background:-webkit-radial-gradient(30% 30%,white,gray,black);
        }
        .rect {
            width: 200px;
            height: 100px;
            border-radius: 20px;
            background:-webkit-linear-gradient(top, #000 5%, #fff 50%, #000 95%);
        }
        .square {
            width: 200px;
            height: 200px;
            border-radius: 20px;
            background: repeating-linear-gradient(45deg,#1a21ef 8%, #05ff00 16%, #f10d26 24%, #05ff00 32%,
            #1a21ef 40%)
        }
    </style>
</head>
<body>
<div class="img1">
    <div class="a1"></div>
    <div class="a2"></div>
</div>
<div class="img2">
    <div class="img3">
        <img src="22.jpg" alt="">
    </div>

</div>
<div class="text">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
<div class="yuan"></div>
<div class="rect"></div>
<div class="square"></div>
</body>
</html>
